<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/timeColumn.css">
</head>

<body>
    <div class="timeColumnContainer">
        <div class="Navigation">
            <ul>
                <li>
                    <a href="javascript:;">豆瓣</a>
                </li>
                <li>
                    <a href="javascript:;">读书</a>
                </li>
                <li>
                    <a href="javascript:;">电影</a>
                </li>
                <li>
                    <a href="javascript:;">音乐</a>
                </li>
                <li>
                    <a href="javascript:;">同城</a>
                </li>
                <li>
                    <a href="javascript:;">小组</a>
                </li>
                <li>
                    <a href="javascript:;">阅读</a>
                </li>
                <li>
                    <a href="javascript:;">FM</a>
                </li>
                <li>
                    <a href="javascript:;">时间</a>
                </li>
                <li>
                    <a href="javascript:;">豆品</a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="JavaScript:;">下载豆瓣客户端</a>
                </li>
                <li>
                    <a href="javascript:;">登陆/注册</a>
                </li>
            </ul>
        </div>
        <div class="timeColumnContent">
            <div class="cover">
                <img src="https://img3.doubanio.com/dae/niffler/niffler/images/06f6b88a-e10b-11ea-b18c-525a79eedfd1.jpg"
                    alt="">
            </div>
            <div class="timeColumnList">
                <div class="ListItem active">
                    <span>详情</span>
                </div>
                <div class="ListItem">
                    <span>目录</span>
                </div>
                <div class="ListItem">
                    <span>留言</span>
                </div>
            </div>
            <div class="content">
                <div class="introduction">
                    <div class="introductionItem">
                        <span>苗炜·文学体验30讲——陪你度过这时代的晚上</span>
                    </div>
                    <div class="details">
                        <p class="xinpin">新品上架</p>
                        <span class="price">99.00元</span>
                        <span class="newPrice">129.00元</span>
                        <span class="music">音乐专栏</span>
                        <p class="book">共33期，每期仅需3.00元</p>
                    </div>
                </div>
                <div class="products">
                    <div class="author">
                        <img src="https://img1.doubanio.com/dae/niffler/niffler/images/323a1dd2-d311-11ea-beef-7abec7b5ace8.png"
                            alt="">
                        <div class="authorIntroduce">
                            <p class="authorName">李苑</p>
                            <p class="authorDeeds">
                                清华大学优良毕业生，直博期间赴日本东北大学进行双学位交换项目后留日。自2012年开始，在日本主持和参与多项集合住宅与单体住宅的设计与施工。现就任某大型咨询公司技术顾问，同时兼以独立室内设计师和收纳咨询师的工作，作为独立室内设计师完
                            </p>
                        </div>
                    </div>
                    <div class="publish">
                        <img src="https://img1.doubanio.com/dae/niffler/niffler/images/7ede502c-d311-11ea-beef-7abec7b5ace8.png"
                            alt="">
                        <p class="publishName">出品方 机械工业出版社</p>
                        <a href="javascript:;">
                            <p class="toHome">豆瓣主页></p>
                        </a>
                    </div>
                </div>
                <div class="introductionImage">
                    <div class="jianjie">简介</div>
                    <img src="https://img1.doubanio.com/dae/niffler/niffler/images/ed4f1eb0-d573-11ea-ae08-7abec7b5ace8.jpg"
                        alt="">
                </div>
                <div class="purchase">
                    <div class="tryListening">
                        <a href="javascript:;">试看</a>
                    </div>
                    <div class="subscribe">
                        <a href="javascript:;">
                            <span class="newPrice">订阅 99.00元</span>
                            <span class="price">129.00元</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>